<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>后台管理-配置</title>
		<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
		<meta name="description" content="Developed By M Abdur Rokib Promy">
		<meta name="keywords" content="Admin, Bootstrap 3, Template, Theme, Responsive">
		<!-- bootstrap 3.0.2 -->
		<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">
		<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
		<!-- google font -->
		<!--<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>-->
		<!-- Theme style -->
		<link href="css/style.css" rel="stylesheet" type="text/css" />

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
	</head>

	<body class="skin-black">
		<!-- header logo: style can be found in header.less -->
		<header class="header">
			<a href="index.html" class="logo">
				<!-- Add the class icon to your logo image or logo icon to add the margining -->
				Director
			</a>
			<!-- Header Navbar: style can be found in header.less -->
			<nav class="navbar navbar-static-top" role="navigation">
				<!-- Sidebar toggle button-->
				<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<div class="navbar-right">
					<ul class="nav navbar-nav">
						<!-- Messages: style can be found in dropdown.less-->
						<li class="dropdown messages-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-envelope"></i>
								<span class="label label-success">4</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 4 messages</li>
								<li>
									<!-- inner menu: contains the actual data -->
									<ul class="menu">
										<li>
											<!-- start message -->
											<a href="#">
												<div class="pull-left">
													<img src="img/avatar3.png" class="img-circle" alt="User Image" />
												</div>
												<h4>
                                                    Support Team
                                                    <small><i class="fa fa-clock-o"></i> 5 mins</small>
                                                </h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<!-- end message -->
										<li>
											<a href="#">
												<div class="pull-left">
													<img src="img/avatar2.png" class="img-circle" alt="user image" />
												</div>
												<h4>
                                                    Director Design Team
                                                    <small><i class="fa fa-clock-o"></i> 2 hours</small>
                                                </h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<div class="pull-left">
													<img src="img/avatar.png" class="img-circle" alt="user image" />
												</div>
												<h4>
                                                    Developers
                                                    <small><i class="fa fa-clock-o"></i> Today</small>
                                                </h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<div class="pull-left">
													<img src="img/avatar2.png" class="img-circle" alt="user image" />
												</div>
												<h4>
                                                    Sales Department
                                                    <small><i class="fa fa-clock-o"></i> Yesterday</small>
                                                </h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<div class="pull-left">
													<img src="img/avatar.png" class="img-circle" alt="user image" />
												</div>
												<h4>
                                                    Reviewers
                                                    <small><i class="fa fa-clock-o"></i> 2 days</small>
                                                </h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
									</ul>
								</li>
								<li class="footer">
									<a href="#">See All Messages</a>
								</li>
							</ul>
						</li>
						<li class="dropdown tasks-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-tasks"></i>
								<span class="label label-danger">9</span>
							</a>
							<ul class="dropdown-menu">

								<li class="header">You have 9 tasks</li>
								<li>
									<!-- inner menu: contains the actual data -->
									<ul class="menu">
										<li>
											<!-- Task item -->
											<a href="#">
												<h3>
                                                    Design some buttons
                                                    <small class="pull-right">20%</small>
                                                </h3>
												<div class="progress progress-striped xs">
													<div class="progress-bar progress-bar-success" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">20% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<!-- end task item -->
										<li>
											<!-- Task item -->
											<a href="#">
												<h3>
                                                    Create a nice theme
                                                    <small class="pull-right">40%</small>
                                                </h3>
												<div class="progress progress-striped xs">
													<div class="progress-bar progress-bar-danger" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">40% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<!-- end task item -->
										<li>
											<!-- Task item -->
											<a href="#">
												<h3>
                                                    Some task I need to do
                                                    <small class="pull-right">60%</small>
                                                </h3>
												<div class="progress progress-striped xs">
													<div class="progress-bar progress-bar-info" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">60% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<!-- end task item -->
										<li>
											<!-- Task item -->
											<a href="#">
												<h3>
                                                    Make beautiful transitions
                                                    <small class="pull-right">80%</small>
                                                </h3>
												<div class="progress progress-striped xs">
													<div class="progress-bar progress-bar-warning" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">80% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<!-- end task item -->
									</ul>
								</li>
								<li class="footer">
									<a href="#">View all tasks</a>
								</li>

							</ul>
						</li>
						<!-- User Account: style can be found in dropdown.less -->
						<li class="dropdown user user-menu">

							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-user"></i>
								<span>Jane Doe <i class="caret"></i></span>
							</a>
							<ul class="dropdown-menu dropdown-custom dropdown-menu-right">
								<li class="dropdown-header text-center">Account</li>

								<li>
									<a href="#">
										<i class="fa fa-clock-o fa-fw pull-right"></i>
										<span class="badge badge-success pull-right">10</span> Updates</a>
									<a href="#">
										<i class="fa fa-envelope-o fa-fw pull-right"></i>
										<span class="badge badge-danger pull-right">5</span> Messages</a>
									<a href="#"><i class="fa fa-magnet fa-fw pull-right"></i>
										<span class="badge badge-info pull-right">3</span> Subscriptions</a>
									<a href="#"><i class="fa fa-question fa-fw pull-right"></i> <span class="badge pull-right">11</span> FAQ</a>
								</li>

								<li class="divider"></li>

								<li>
									<a href="#">
										<i class="fa fa-user fa-fw pull-right"></i> Profile
									</a>
									<a data-toggle="modal" href="#modal-user-settings">
										<i class="fa fa-cog fa-fw pull-right"></i> Settings
									</a>
								</li>

								<li class="divider"></li>

								<li>
									<a href="#"><i class="fa fa-ban fa-fw pull-right"></i> Logout</a>
								</li>
							</ul>

						</li>
					</ul>
				</div>
			</nav>
		</header>
		<div class="wrapper row-offcanvas row-offcanvas-left">
			<!-- Left side column. contains the logo and sidebar -->
			<aside class="left-side sidebar-offcanvas">
				<!-- sidebar: style can be found in sidebar.less -->
				<section class="sidebar">
					<!-- Sidebar user panel -->
					<div class="user-panel">
						<div class="pull-left image">
							<img src="img/avatar3.png" class="img-circle" alt="User Image" />
						</div>
						<div class="pull-left info">
							<p>Hello, Jane</p>

							<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
						</div>
					</div>
					<!-- search form -->
					<form action="#" method="get" class="sidebar-form">
						<div class="input-group">
							<input type="text" name="q" class="form-control" placeholder="Search..." />
							<span class="input-group-btn">
                                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
                            </span>
						</div>
					</form>
					<ul class="sidebar-menu">
						<li>
							<a href="index.html">
								<i class="fa fa-dashboard"></i> <span>首页</span>
							</a>
						</li>
						<!--<li>
							<a href="general.html">
								<i class="fa fa-gavel"></i> <span>General</span>
							</a>
						</li>-->

						<li>
							<a href="task.html">
								<i class="fa fa-globe"></i> <span>任务管理</span>
							</a>
						</li>

						<li class="active">
							<a href="configList.html">
								<i class="fa fa-glass"></i> <span>配置管理</span>
							</a>
						</li>

					</ul>
				</section>
				<!-- /.sidebar -->
			</aside>

			<!-- Right side column. Contains the navbar and content of the page -->
			<aside class="right-side">

				<!-- Main content -->
				<section class="content">
					<div class="row">
						<div class="col-md-12">
							<div class="panel">
								<header class="panel-heading">
									<button type="button" class="btn btn-sm btn-primary" onclick="config.openAddWindow();">新增</button>
								</header>
								<div class="panel-body">
									<table class="table table-bordered" id="configGrid">
										
									</table>
								
								</div>
							</div>
						</div>
					</div>
		</div>
		</div>
		</section>
		<!-- /.content -->
		<!--modal-->
		<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">新增配置</h4>
                    </div>
                    <div class="modal-body">
						<section class="panel">
                              <form role="form" id="addForm">
                                      <div class="form-group">
                                          <label for="exampleInputEmail1">名称</label>
                                          <input type="text" class="form-control" name="name" placeholder="输入名称">
                                      </div>
                                      <div class="form-group">
                                          <label for="exampleInputPassword1">域名</label>
                                          <input type="text" class="form-control" name="host" placeholder="输入域名">
                                      </div>
                                      <div class="form-group">
                                          <label for="exampleInputPassword1">schema</label>
                                          <input type="text" class="form-control" id="schema" name="schema" placeholder="输入schema">
                                      </div>
                                      <div class="form-group">
                                          <label for="exampleInputPassword1">上下文地址</label>
                                          <input type="text" class="form-control" name="contextPath" placeholder="输入上下文地址">
                                      </div>
                                      <div class="form-group">
                                          <label for="exampleInputPassword1">编码</label>
                                          <input type="text" class="form-control" name="charset" placeholder="输入编码">
                                      </div>
                                  </form>
                          </section>
                    </div>
                    <div class="modal-footer">
                    	<button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                        <button class="btn btn-danger" type="button" id="addSubmit">确定</button>
                    </div>
                </div>
            </div>
        </div>
		<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">修改配置</h4>
                    </div>
                    <div class="modal-body">
						<section class="panel">
                              <form role="form" id="editForm">
                              		  <input type="hidden" id="id" name="id" value="" /> 	
                                      <div class="form-group">
                                          <label for="exampleInputEmail1">名称</label>
                                          <input type="text" class="form-control" id="name", name="name" placeholder="输入名称">
                                      </div>
                                      <div class="form-group">
                                          <label for="exampleInputPassword1">域名</label>
                                          <input type="text" class="form-control" id="host" name="host" placeholder="输入域名">
                                      </div>
                                      <div class="form-group">
                                          <label for="exampleInputPassword1">schema</label>
                                          <input type="text" class="form-control" id="requestWay" name="requestWay" placeholder="输入schema">
                                      </div>
                                      <div class="form-group">
                                          <label for="exampleInputPassword1">上下文地址</label>
                                          <input type="text" class="form-control" id="contextPath" name="contextPath" placeholder="输入上下文地址">
                                      </div>
                                      <div class="form-group">
                                          <label for="exampleInputPassword1">编码</label>
                                          <input type="text" class="form-control" id="charset" name="charset" placeholder="输入编码">
                                      </div>
                                  </form>
                          </section>
                    </div>
                    <div class="modal-footer">
                    	<button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                        <button class="btn btn-danger" type="button" id="editSubmit">确定</button>
                    </div>
                </div>
            </div>
        </div>
		</aside>
		<!-- /.right-side -->
		</div>
		<!-- ./wrapper -->

		<!-- jQuery 2.0.2 -->
		<script src="js/jquery.min.js" type="text/javascript"></script>

		<!-- Bootstrap -->
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
	
		<!-- Director App -->
		<script src="js/Director/app.js" type="text/javascript"></script>
		<script src="js/doT.js" type="text/javascript"></script>
		<script src="js/utils.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
		<script id="configTemplate" type="text/x-dot-template" >
			<tr>
				<th>名称</th>
				<th>域名</th>
				<th>上下文地址</th>
				<th>SCHEMA</th>
				<th>编码</th>
				<th>是否激活</th>
				<th>操作</th>
			</tr>
			{{ for(var index in it ){ }}
			<tr>
				<td>{{=it[index].name}}</td>
				<td>{{=it[index].host}}</td>
				<td>{{=it[index].contextPath}}</td>
				<td>{{=it[index].requestWay}}</td>
				<td>{{=it[index].charset}}</td>
				<td>
					{{?it[index].actived}}
					是
					{{??}}
					否
					{{?}}
				</td>
				<td>
					<button class="btn btn-default btn-xs" onclick="config.openUpdateWind('{{=it[index].id}}')" ><i class="fa fa-pencil"></i></button>
                    <button class="btn btn-default btn-xs" onclick="config.deleteById('{{=it[index].id}}')" ><i class="fa fa-times"></i></button>
                    {{? !it[index].actived}}
					<button type="button" class="btn btn-sm btn-primary" onclick="config.active('{{=it[index].id}}');">激活</button>
					{{?}}
				</td>
			</tr>
			{{ } }}
		</script>
		<script>
			$.fn.serializeObject = function(){
				var o = {};
				var a = this.serializeArray();
				$.each(a, function() {
					if (o[this.name] !== undefined) {
						if (!o[this.name].push) {
							o[this.name] = [o[this.name]];
						}
						o[this.name].push(this.value || '');
					} else {
						o[this.name] = this.value || '';
					}
				});
				return o;
			};
			
			
			
			var config = {
				
				loadConfigList : function(){
					commons.ajax({
						url:commons.routPath+'/domain/conf/all',
						type:'get',
						async:true,
						success:function(data){
							if(data.meta.code === '200'){
								var dataList = data.body.list;
								var tmpl = doT.template($("#configTemplate").text());
								// 将数据扔进templ中。并在DIV中显示出来
								$("#configGrid").html(tmpl(dataList));
							}else{
								if(data.meta.message=='unLogin'){
									//跳转到登录页面
									location.href='/login.html'
								}else{
									alert(data.meta.message);
								}
							}
						}
					});
				},
				
				reLoadConfigList : function(){
					config.loadConfigList();
				},
				openAddWindow : function(){
					$("#addForm")[0].reset();
					$("#add").modal("show");
				},
				add :function(){
					
					commons.ajax({
						url:commons.routPath+'/domain/conf/add',
						contentType: 'application/json',
						data : JSON.stringify($("#addForm").serializeObject()),
						type:'post',
						async:true,
						success:function(reponseData){
							if(reponseData.meta.code === '200'){
								config.reLoadConfigList();
								//关闭
								$("#add").modal('hide')
								
							}else{
								if(reponseData.meta.message=='unLogin'){
									//跳转到登录页面
									location.href='/login.html'
								}else{
									alert(data.meta.message);
								}
							}
						}
					});
					
				},
				update : function(){
					var id = $("#id").val();
					
					commons.ajax({
						url:commons.routPath+"/domain/conf/"+id,
						contentType: 'application/json',
						data : JSON.stringify($("#editForm").serializeObject()),
						type:'PUT',
						async:true,
						success:function(reponseData){
							if(reponseData.meta.code === '200'){
								config.reLoadConfigList();
								//关闭
								$("#edit").modal('hide')
								
							}else{
								if(reponseData.meta.message=='unLogin'){
									//跳转到登录页面
									location.href='/login.html'
								}else{
									alert(data.meta.message);
								}
							}
						}
					});
					
				},
				deleteById : function( id ){
					commons.ajax({
						url:commons.routPath+"/domain/conf/"+id,
						contentType: 'application/json',
						//data : JSON.stringify($("#editForm").serializeObject()),
						type:'delete',
						async:true,
						success:function(reponseData){
							if(reponseData.meta.code === '200'){
								config.reLoadConfigList();
							}else{
								if(reponseData.meta.message=='unLogin'){
									//跳转到登录页面
									location.href='/login.html'
								}else{
									alert(data.meta.message);
								}
							}
						}
					});
				},
				
				openUpdateWind:function( id ){
					commons.ajax({
						url:commons.routPath+"/domain/conf/"+id,
						dataType: 'json',
						type:'get',
						async:true,
						success:function(reponseData){
							if(reponseData.meta.code === '200'){
								var detail = reponseData.body.detail;
								for(var property in detail ){
									$("#"+property).val(detail[property]);
								}
								$("#edit").modal('show');
							}else{
								if(reponseData.meta.message=='unLogin'){
									//跳转到登录页面
									location.href='/login.html'
								}else{
									alert(data.meta.message);
								}
							}
						}
					});
					
				
				},
				
				active :function( id ){
					commons.ajax({
						url:commons.routPath+"/domain/conf/"+id+"/active",
						dataType: 'json',
						type:'PUT',
						async:true,
						success:function(reponseData){
							if(reponseData.meta.code === '200'){
								config.loadConfigList();
							}else{
								if(reponseData.meta.message=='unLogin'){
									//跳转到登录页面
									location.href='/login.html'
								}else{
									alert(data.meta.message);
								}
							}
						}
					});
					
				}
				
			}
			
			
			//进入到此页面后就加载数据
			$(function(){
				$("#addSubmit").click(function(){
					//TODO:新增
					config.add();
				});
				
				$("#editSubmit").click(function(){
					config.update();
				});
				//初始化列表数据
				config.loadConfigList();
				
			});
		</script>
		<div class="modal fade" id="loadWaiting">
		  <div class="modal-dialog modal-sm" style="text-align: center;vertical-align: middle;">
			  <img alt="" src="" />
		  </div>
		</div>
	</body>

</html>